<template>
	<view class="" style="height: 100%;">
<!-- 		<mescroll-uni :fixed="false" @init="mescrollInit" :height="height" :down="downOption"
			@down="downCallback" :up="upOption" @up="upCallback" @emptyclick="emptyClick"> -->
	<view class="mescroll-item-box">
		<view class="mescroll-item" v-for="(item,index) in List" @click="creadModel(item)">
			<image :src="item.imgUrl" mode="aspectFill"></image>
		</view>
	</view>
	<view class="cu-modal" :class="modalName == 'Image' ? 'show' : ''" @tap="hideModal">
			<view class="cu-dialog" v-if="goods && erweimapath && haibaoShow" @tap="hideModal">
				<view class="bg-img">

					<!-- 自定义生成海报组件 -->
					<!-- @success：成功事件  imgSrc：图片地址（微信小程序必须白名单iP） QrSrc：二维码图片地址  Title：标题 PriceTxt：价格 OriginalTxt：原始价格 LineType -->
					<cc-poster ref="posterComponent" @success="posterSuccess"  :imgSrc="goods.itempic" :QrSrc="erweimapath"
						:Title="goods.itemtitle" :PriceTxt="goods.itemendprice" :OriginalTxt="goods.itemprice" :Referrer="goods.Referrer" :ViewDetails="goods.ViewDetails"
						:LineType="false"></cc-poster>
				</view>
			</view>
			
		</view>
		<view class="code-box-img">
			<uqrcode ref="uqrcode" canvas-id="qrcode" :value="value" :options="options" size=200 sizeUnit="rpx"
				:auto="true" @complete="complete"></uqrcode>
		</view>
		<!-- </mescroll-uni> -->
	</view>
</template>

<script>
	
	const api = require('../../config/api');
	const util = require('../../utils/util');
	export default {

		data() {
			return {
				List: [
				],
					value: '',
				haibaoImg: null,
				modalName: '',
				haibaoShow: false,
				
				// 二维码图片地址
				erweimapath: "",
				// https://www.xinhuanet.com/politics/2016-07/19/5119875106653616178_11n.jpg
				// 商品地址
					goods: {
						"CanvasID":'',
						"itemid": "2nNozWXiotnRwxGUakBuXUD-0npyN5GSNmYDb0pgTxw",
						"itemtitle": "",
						"itemshorttitle": "",
						"itemdesc": "【开丽旗舰店】安心裤型亲肤面料，产后专用不勒刀口，免穿设计方便，超强吸收加长加大款，产妇的优质选择！【赠运费险】",
						"itemprice": "",
						"todaysale": "3",
						"itempic": "https://img.xlblm.cn/dfdd95c7-e37e-4c33-a7ea-b5eb42a2c269.png",
						"itemendprice": "29.91",
						"Referrer":'推荐人',
						"ViewDetails":'ViewDetails'
					
					},
				
				UserInfo:{},
				options: {
					margin: 10,
					foregroundImageSrc: '',
					// foregroundImageWidth:size / 4,
					// foregroundImageHeight:size / 4,
					// foreground: {
					// 	image: {
					// 		src: 
					// 		width: 0.25,
					// 		height: 0.25,
					// 		align: ['center', 'center'],
					// 		anchor: [0, 0]
					// 	}
					// }
				},
			}
		},
		onShow() {
		this.getlistConfig();
		this.getUserInfo()
		},
		methods: {
			complete(e) {
				// console.log(e);
				if (e.success) {
					// console.log('生成成功');
					this.sucess = e.success
					this.isshows = false
					this.$refs.uqrcode.toTempFilePath({
						success: res => {
							// console.log(res);
							this.erweimapath = res.tempFilePath
						},
						fail: err => {
							console.log(err)
							uni.showToast({
								title: '',
								duration: 2000,
								icon: 'none'
							})
						}
					});
				} else {
					console.log('生成失败');
					uni.showToast({
						title: '',
						duration: 2000,
						icon: 'none'
					})
				}
			
			},
			// creadModel(){
				
			// },
			craeterweimapath(e){
				this.value = api.appRegisterUrl + e
				// console.log(this.value );
			},
			posterSuccess(haibaoImg) {
				// console.log(haibaoImg);
				this.haibaoImg = haibaoImg;
				this.modalName = 'Image';
			},
			creadModel(item) {
				// this.goods.itemid = item.id;
				// this.goods.itemtitle = '';
				this.goods.itempic = item.imgUrl;
				this.goods.Referrer = this.UserInfo.user.userName + "  " + this.UserInfo.user.phone;
				this.goods.ViewDetails = "邀请码：" + this.UserInfo.user.inviteCode;
				
				if (!this.haibaoImg) {
					this.haibaoShow = true;
			
					uni.showLoading({
						title: '海报生成中...'
					});
			
				} else {
					 if (this.$refs.posterComponent) {
							this.goods.itempic = item.imgUrl;
					        // 调用组件的方法，例如 `someMethod`
					        this.$refs.posterComponent.chongxie();
					      } else {
					      }
					// this.modalName = 'Image';
				}
			this.haibaoShow = true;
						
			uni.showLoading({
				title: '海报生成中...',
				mask: true
			});
			// this.posterSuccess(haibaoImg);
			},
			hideModal() {
				this.modalName = '';
			},
			async getlistConfig() {
				const res = await util.request(
					api.listConfigUrl, {
						
					},
					'POST'
				);
				// console.log(res);
				if (res.code !== 0) {
					uni.showToast({
						title: res.msg,
						icon: "none"
					})
			
				} else {
					this.List = res.data
				}
			},
			async getUserInfo() {
				const res = await util.request(
					api.getUserInfoUrl, {
						
					},
					'POST'
				);
				// console.log(res);
				if (res.code !== 0) {
					uni.showToast({
						title: res.msg,
						icon: "none"
					})
			
				} else {
					this.UserInfo = res.data
					this.craeterweimapath(res.data.user.inviteCode)
					// this.List = res.data
				}
			},
		
		}
		}
</script>

<style lang="scss">
	.cu-modal {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 1110;
		opacity: 0;
		outline: 0;
		text-align: center;
		-ms-transform: scale(1.185);
		transform: scale(1.185);
		backface-visibility: hidden;
		perspective: 2000upx;
		background: rgba(0, 0, 0, 0.6);
		transition: all 0.3s ease-in-out 0s;
		pointer-events: none;
	}

	.cu-modal::before {
		content: "\200B";
		display: inline-block;
		height: 100%;
		vertical-align: middle;
	}

	.cu-modal.show {
		opacity: 1;
		transition-duration: 0.3s;
		-ms-transform: scale(1);
		transform: scale(1);
		overflow-x: hidden;
		overflow-y: auto;
		pointer-events: auto;
	}

	.cu-dialog {
		position: relative;
		display: inline-block;
		vertical-align: middle;
		margin-left: auto;
		margin-right: auto;
		width: 680upx;
		max-width: 100%;
		background-color: #f8f8f8;
		border-radius: 10upx;
		overflow: hidden;
	}
</style>
<style lang="scss" scoped>
	.mescroll-item-box{
		height: 100%;
		overflow: hidden;
		overflow-y: scroll;
		display: flex;
		// align-items: center;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.mescroll-item{
		width: 49%;
		// margin: 5px;
		padding: 10px;
		height: 363px;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.mescroll-item-text{
		display: flex;
		align-items: center;
		justify-content: space-between;
		
	}
	.amt{
		color: #FF6868;
	}
	.mescroll-item-time{
		margin-top: 5px;
		color: #929292;
	}
	.code-box-img{
		position: absolute;
		left: -100%;
	}

</style>